<template>
	<u-popup v-model="show" mode="center" :closeable="true" width="80%" border-radius="14">
		<view class="font-model-wraper">
			<view class="font-model-content">
				<view class="modal-title">字体设置</view>
				<view class="content">
					<view class="rotate">
						<text>旋转角度：</text>
						<input maxlength="3" @input="changeVal($event, 'rotate')" v-model="rotate" type="text" />
					</view>
					<view class="rotate">
						<text>图层层级：</text>
						<input maxlength="3" @input="changeVal($event, 'zIndex')" v-model="font.zIndex" type="text" />
					</view>
					<view class="rotate">
						<text>区域宽度：</text>
						<input maxlength="3" @input="changeVal($event, 'width')" v-model="font.width" type="text" />
					</view>
					<view class="rotate">
						<text>区域高度：</text>
						<input maxlength="3" @input="changeVal($event, 'height')" v-model="font.height" type="text" />
					</view>
					<view class="rotate">
						<text>字体大小：</text>
						<input maxlength="3" @input="changeVal($event, 'fontSize')" v-model="font.fontSize" type="text" />
					</view>
					<view class="setting-box">
						<!-- 颜色 -->
						<view class="color item" @click="change" :style="{ background: font.color }"></view>
						<!-- 字体加粗 -->
						<image class="font-weight item" @click="handleFontWeight" :src="require('../../static/s-font/font-weight.png')"></image>
						<!-- 字体放大 -->
						<image class="font-size item" @click="handleFontSize('add')" :src="require('../../static/s-font/font-big.png')"></image>
						<!-- 字体缩小 -->
						<image class="font-size item" @click="handleFontSize('reduce')" :src="require('../../static/s-font/font-mini.png')"></image>
						<!-- 中部横线 -->
						<!-- <image class="line-through item" @click="handleLineThrough" :src="require('../../static/s-font/line-through.png')"></image> -->
						<!-- 下划线 -->
						<!-- <image class="underline item" @click="handleUnderline" :src="require('../../static/s-font/underline.png')"></image> -->
						<!-- 文本左对齐 -->
						<image class="align-left item" @click="font.textAlign = 'left'" :src="require('../../static/s-font/align-left.png')"></image>
						<!-- 文本居中对齐 -->
						<image class="align-center item" @click="font.textAlign = 'center'" :src="require('../../static/s-font/align-center.png')"></image>
						<!-- 文本右对齐 -->
						<image class="align-right item" @click="font.textAlign = 'right'" :src="require('../../static/s-font/align-right.png')"></image>
					</view>
					<textarea
						class="textarea"
						auto-height
						:maxlength="500"
						v-model="font.text"
						:style="{
							color: font.color,
							fontSize: font.fontSize + 'px',
							textDecoration: font.textDecoration,
							textAlign: font.textAlign,
							fontWeight: font.fontWeight,
							background: background
						}"
						placeholder="请输入文本"
					></textarea>
				</view>
				<view class="btn-wrap">
					<view class="btn cancel" @click="handleCancel">取消</view>
					<view class="btn confirm" @click="throttle">确认</view>
				</view>
				<view></view>
			</view>
		</view>
		<s-color ref="color" :color="font.color" :is-show="colorShow" @confirm="handleColorConfirm" @cancel="colorShow = false" />
	</u-popup>
</template>

<script>
import sColor from '../s-color/s-color.vue';
import uPopup from '../u-popup/u-popup.vue';
import { formatTool } from '../../utils/tool.js';
import throttle  from '../../utils/throttle.js';
export default {
	name: 'sFont',
	props: {
		// 是否显示弹窗
		isShow: {
			type: Boolean,
			default: false
		},
		fontData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	components: { sColor, uPopup },
	computed: {
		setFont() {
			// console.log('setFont -> this.fontData', this.fontData);
			return this.fontData;
		},
		background() {
			let whitelist = [
				'#FFFFFF',
				'#fff',
				'transparent',
				'#ECECFF',
				'#D2E9FF',
				'#ECFFFF',
				'#FFFFCE ',
				'#FFF4C1',
				'#F5FFE8',
				'#FFFFF4',
				'#FFFCEC',
				'#FFFAF4',
				'#FFF3EE',
				'#F2E6E6',
				'#E8E8D0',
				'#D1E9E9',
				'#F3F3FA'
			];
			if (whitelist.includes(this.font.color)) {
				return '#000';
			} else {
				return '#fff';
			}
		}
	},
	watch: {
		setFont: {
			handler(val) {
				// console.log('handler -> val', val);//
				this.font = Object.assign(
					{
						text: '',
						color: '#333',
						fontweight: 'normal',
						fontSize: '18',
						textDecoration: '',
						textAlign: 'left'
					},
					val
				);
				this.rotate = val.rotate || 0;
				this.fontWeight = this.font.fontWeight == 'bold' ? true : false;
				this.lineThrough = this.font.textDecoration === 'line-through' ? true : false;
				this.underline = this.font.textDecoration === 'underline' ? true : false;
			},
			deep: true,
			immediate: true
		}
	},
	data() {
		return {
			colorShow: false,
			show: false,
			rotate: 0,
			underline: false,
			lineThrough: false,
			fontWeight: false,
			font: {}
		};
	},
	methods: {
		changeVal(e, key) {
			let val = e.target.value;
			if (!val) return;
			if (!formatTool(val, 2)) {
				this.$nextTick(() => {
					if (key == 'rotate') {
						this.rotate = 0;
					} else {
						this.font[key] = 1;
					}
				});
			}
		},
		change() {
			this.$refs.color.show = true;
		},
		handleCancel() {
			this.show = false;
			this.$emit('cancel', 'cancel');
		},
		throttle(){
			throttle(this.handleConfirm, 1500)
		},
		handleConfirm() {
			this.show = false;
			this.font.rotate = this.rotate;
			this.$emit('confirm', this.font);
		},
		handleColorConfirm(data) {
			this.font.color = data.color === 'transparent' ? '#FFFFFF' : data.color;
			this.colorShow = false;
		},
		handleFontSize(type) {
			if (type === 'add') {
				this.font.fontSize++;
			} else {
				if (this.font.fontSize > 10) {
					this.font.fontSize--;
				} else {
					uni.showToast({
						title: '字体不能再小了哦',
						duration: 2000,
						icon: 'none'
					});
				}
			}
		},
		handleFontWeight() {
			this.fontWeight = !this.fontWeight;
			this.font.fontWeight = this.fontWeight ? 'bold' : 'normal';
		},
		handleLineThrough() {
			this.lineThrough = !this.lineThrough;
			this.font.textDecoration = this.lineThrough ? 'line-through' : this.underline ? 'underline' : '';
		},
		handleUnderline() {
			this.underline = !this.underline;
			this.font.textDecoration = this.lineThrough ? 'line-through' : this.underline ? 'underline' : '';
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../scss/common.scss';
.font-model-wraper {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	z-index: 1000;
	inset: 0;

	.font-model-content {
		position: relative;

		.modal-title {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: $uni-text-color;
			background: $uni-bg-color-grey;
		}

		.content {
			background: #fff;

			.setting-box {
				padding: 10rpx 20rpx;
				border-top: 1rpx solid $uni-border-color;
				border-bottom: 1rpx solid $uni-border-color;
				overflow: hidden;

				.item {
					width: 40rpx;
					height: 40rpx;
					float: left;

					&:not(:last-child) {
						margin-right: 40rpx;
					}
				}
				.color {
					border: 1px solid #ddd;
					border-radius: 8rpx;
				}
			}

			.textarea {
				margin: 20rpx auto 0;
				padding: 20rpx;
				border: 1px solid #ddd;
				border-radius: 10rpx;
				min-height: 200rpx;
			}
		}

		.btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			.btn {
				width: 50%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				float: left;
				border-top: 1rpx solid $uni-border-color;
				color: #5999ff;
			}

			.btn.cancel {
				width: calc(50% - 1rpx);
				border-right: 1rpx solid $uni-border-color;
				color: #666;
			}
		}
	}
}
.content {
	.rotate {
		padding: 20rpx;
		font-size: 28rpx;
		display: flex;
		font-weight: 700;
		justify-content: flex-start;
		align-items: center;
		text {
			margin-right: 15rpx;
		}
	}
}
</style>
